<template>
  <div>
    <a-space style="margin-top: 15px">
      <a-button @click="refresh">刷新</a-button>
      <a-button @click="exportToExcel">一键导出</a-button>
      <a-checkbox :checked="checked" @change="noOffline()">不看断网</a-checkbox>
    </a-space>
    <alarm-table
      ref="xTable"
      :alarms="activeAlarm"
      noclear="true"
      style="margin-top: 10px"
    ></alarm-table>
  </div>
</template>

<script>
import AlarmTable from "../../components/alarm/alarmTable.vue";
export default {
  components: {
    AlarmTable,
  },
  name: "ActiveAlarm",
  data() {
    return {
      loading: false,
      show: false,
      checked: false,
    };
  },
  computed: {
    activeAlarm() {
      if (this.checked) {
        return this.$store.state.activeAlarm.activeAlarms.filter((a) => {
          return a.alarm_id !== "offline";
        });
      }
      return this.$store.state.activeAlarm.activeAlarms;
    },
    alarmCount() {
      const alarms = this.$store.state.activeAlarm.activeAlarms;
      if (alarms) {
        return alarms.length;
      }
      return 0;
    },
  },
  beforeCreate() {
    // you should check in this action that items already loaded earlier as well
  },
  mounted() {
    console.log("hello------------------------------222");
    this.refresh();
  },
  methods: {
    refresh() {
      this.$store.dispatch("activeAlarm/refreshActiveAlarm");
    },
    exportToExcel() {
      this.$refs.xTable.exportToExcel();
    },
    filterName({ option, row }) {
      return row.thing_name.indexOf(option.data) >= 0;
    },
    filterAlarmName({ option, row }) {
      return row.alarm_name.indexOf(option.data) >= 0;
    },
    noOffline() {
      this.checked = !this.checked;
      console.log("9999999", this.checked);
    },
  },
};
</script>

<style lang="less">
.header-notice {
  display: inline-block;
  transition: all 0.3s;
  span {
    vertical-align: initial;
  }
  .notice-badge {
    color: inherit;
    .header-notice-icon {
      font-size: 16px;
      padding: 4px;
    }
  }
}
.dropdown-tabs {
  background-color: @base-bg-color;
  box-shadow: 0 2px 8px @shadow-color;
  border-radius: 4px;
  .tab-pane {
    padding: 0 24px 12px;
    min-height: 250px;
  }
}
</style>